<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>触发器信息</span>
      <el-button
        v-if="!triggerForm.triggerId"
        style="float: right"
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="$emit('add-trigger')"
        >创建触发器</el-button
      >
      <el-button
        v-if="triggerForm.triggerId"
        style="float: right; margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        size="mini"
        @click="$emit('edit-trigger')"
        >编辑触发器</el-button
      >
      <el-button
        v-if="triggerForm.triggerId"
        style="float: right"
        type="danger"
        icon="el-icon-delete"
        size="mini"
        @click="$emit('delete-trigger')"
        >删除触发器</el-button
      >
    </div>
    <div v-if="triggerForm.triggerId">
      <el-form :model="triggerForm" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="触发器条件" prop="triggerCondition">
              <span>{{
                triggerForm.triggerCondition === "or" ? "任意一个" : "全部"
              }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否抑制" prop="isRestrain">
              <span>{{ triggerForm.isRestrain === "0" ? "否" : "是" }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" v-if="triggerForm.isRestrain === '1'">
            <el-form-item label="抑制时间" prop="intervalTime">
              <span>{{ triggerForm.intervalTime }}分钟</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="会话时间" prop="dataTime">
              <span>{{ triggerForm.dataTime }}秒</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="重复次数" prop="repeatNum">
              <span>{{ triggerForm.repeatNum }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="触发项类型" prop="termType">
              <span>{{
                triggerForm.termType === "property"
                  ? "属性触发"
                  : triggerForm.termType === "event"
                  ? "事件触发"
                  : "设备上下线"
              }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="触发器描述" prop="remark">
              <span>{{ triggerForm.remark }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <term-list
        :term-list="termList"
        @add-term="$emit('add-term')"
        @edit-term="$emit('edit-term', $event)"
        @delete-term="$emit('delete-term', $event)"
      />
      <action-list
        :action-list="actionList"
        @add-action="$emit('add-action')"
        @edit-action="$emit('edit-action', $event)"
        @delete-action="$emit('delete-action', $event)"
      />
    </div>
    <div v-else class="empty-block">
      <span class="empty-text">暂无触发器，请点击右上角创建</span>
    </div>
  </el-card>
</template>

<style scoped>
.empty-block {
  padding: 32px 0;
  text-align: center;
  color: #909399;
}
</style>

<script>
import TermList from "./termList.vue";
import ActionList from "./actionList.vue";

export default {
  components: { TermList, ActionList },
  props: {
    triggerForm: {
      type: Object,
      required: true,
    },
    termList: {
      type: Array,
      required: true,
    },
    actionList: {
      type: Array,
      required: true,
    },
  },
};
</script>
